<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            table {
                border: solid thin black;
                border-collapse: collapse;
                margin: 10px;
            }
            td { padding: 4px 5px; }
        </style>
    </head>
    <body>
        <table border="1">
            <thead><tr><th>Multiply</th><th>Result</th></tr></thead>
            <tbody id="fruitsBody">
                <tr><td class="sum">1 x 1</td><td class="result">1</td></tr>
            </tbody>
        </table>

        <button id="add">Add Row</button>

        <script>
            var tableBody = document.getElementById("fruitsBody");

            document.getElementById("add").onclick = function() {
                var count = tableBody.getElementsByTagName("tr").length + 1;
                // cloneNode复制元素
                var newElem = tableBody.getElementsByTagName("tr")[0].cloneNode(true);
                newElem.getElementsByClassName("sum")[0].firstChild.data = count
                    + " x " + count;
                newElem.getElementsByClassName("result")[0].firstChild.data =
                    count * count;

                tableBody.appendChild(newElem);
            };
        </script>
    </body>
</html>
